<template>
  <el-form v-bind="$attrs" size="small" :inline="true" label-width="150px" ref="form">
    <el-row :gutter="20">
      <slot></slot>
      <div v-if="showBtn" class="right-btn">
        <el-button @click="cancel ? cancel() : resetFields(null)">{{ showBtn.cancelName || '重 置' }}</el-button>
        <el-button type="primary" @click="ok">{{ showBtn.okName || '查 询' }}</el-button>
        <slot name="button"></slot>
      </div>
    </el-row>
  </el-form>
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'c-forms',
  props: {
    showBtn: {
      type: [Boolean, Object],
      default: false,
    },
    cancel: {
      type: [Boolean, Function],
      default: false,
    },
    ok: {
      type: Function,
      default: () => {
        return () => {}
      },
    },
  },
  setup() {
    const { proxy } = getCurrentInstance()
    function validate() {
      return new Promise((resolve, reject) => {
        proxy.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            reject(valid)
          }
        })
      })
    }
    function validateField(props, callback) {
      proxy.$refs.form.validateField(props, callback)
    }
    function resetFields(callback) {
      proxy.$refs.form.resetFields()
      callback && callback()
    }
    function clearValidate(props) {
      proxy.$refs.form.clearValidate(props)
    }
    return {
      validate,
      resetFields,
      validateField,
      clearValidate,
    }
  },
}
</script>
<style lang="scss">
.right-btn {
  flex-grow: 2;
  text-align: right;
  padding: 0 10px;
}
</style>
